﻿<html>
<head>
  <title>Select colors</title>
  <style type="text/css">
    body { margin: 0px; width: 275px; height: 250px; font-size: 11px; font-family: Segoe UI, Arial; }
    #outer { background-color: #333; height: 100%; }
    #container { color: #ddd; background-color: #333; height: 100%; padding: 1pc; display: none; }
    #title { font-weight: bold; margin-bottom: 1pc; text-align: center; }
    button { nofocusline: expression(this.onFocus=this.blur()); }
    input { width: 75px; border: 1px solid #777; padding-left: 5px; }
    #buttons { font-size: 12px; font-weight: bold; position: absolute; bottom: 1pc; right: 1pc; }
    #instructions, #buttons { margin-top: 1pc; }
    label { margin-left: 1pc; vertical-align: middle; }
  </style>
  <script src="scripts/jscolor.js"></script>
  <script>
    function onload() {
      var parent = window.System.Gadget.document.parentWindow;
      var bc = parent.System.Gadget.Settings.readString("background") || "333333";
      var fc = parent.System.Gadget.Settings.readString("foreground") || "DDDDDD";
      document.getElementById("foreground").value = fc;
      document.getElementById("background").value = bc;
      setTimeout(function () {
        document.getElementById("reset").focus();
        document.getElementById("container").style.display = "block";
      }, 500);
    }

    function background(color) {
      var parent = window.System.Gadget.document.parentWindow;
      parent.document.getElementsByTagName('BODY')[0].style.backgroundColor = '#' + color;
      parent.System.Gadget.Settings.writeString("background", color);
    }

    function foreground(color) {
      var parent = window.System.Gadget.document.parentWindow;
      parent.document.getElementsByTagName('BODY')[0].style.color = '#' + color;
      parent.System.Gadget.Settings.writeString("foreground", color);
    }

    function reset() {
      var bc = "333333";
      var fc = "DDDDDD";
      document.getElementById("foreground").value = fc;
      document.getElementById("background").value = bc;
      foreground(fc);
      background(bc);
      var parent = window.System.Gadget.document.parentWindow;
      parent.APP.removeBackgroundImage();
    }

    function closeFlyout() {
      window.System.Gadget.Flyout.show = false;
    }

  </script>
</head>
<body onload="onload()">
  <div id="outer">
    <div id="container">
      <div id="title">You Can Haz Colors!</div>
      <div>
        <input id="foreground" class="color {onImmediateChange: 'foreground(this);' }" />
        <label>Foreground</label>
      </div>
      <div>
        <input id="background" class="color {onImmediateChange: 'background(this);' }" />
        <label>Background</label>
      </div>
      <div id="instructions">
        Click on the boxes containing the numbers/letters to activate the color selector.
      </div>
      <div id="buttons">
        <button id="reset" onclick="reset()">Reset</button>&nbsp;&nbsp;
          <button id="close" onclick="closeFlyout()">Close</button>
      </div>
    </div>
  </div>
</body>
</html>
